<template>


  <view class="ts-flex ts-column ts-flex-item">

    <view class="ts-flex ts-row">
      <view class="ts-flex ts-column ts-flex-item" style="align-items:flex-start; justify-content: flex-end; height: 400upx;"
        :style="'background-image:url('+coverUrl+');background-size: 100% 100%;'">
        <!-- <text class="ts-text-bold ts-h3 ts-text-red">没有视频</text> -->
        <view class="ts-flex ts-column ts-padding">
          <view class="ts-flex ts-row">
            <text class="ts-flex ts-row ts-h3">2018校青山湖读书协会年会</text>
          </view>
          <view class="ts-flex ts-row">
            <text class="ts-flex ts-row ts-h4">六号楼6501</text>
          </view>
          <view class="ts-flex ts-row">
            <view class="ts-flex ts-row">#ID:32001#</view>
            <view class="ts-flex ts-row ts-padding-left">#已报人数:21/不限#</view>
          </view>
        </view>
      </view>
    </view>


    <view class="ts-flex ts-column ">
      <ts-segmented-control :values="tabs" v-model="currentTab" style-type="text" active-color="#d81e06" borderColor="#d81e06">

      </ts-segmented-control>

      <view class="ts-flex ts-row" style="padding: 20upx;">
        <view v-show="currentTab === 0" class="ts-flex ts-column ts-flex-item">
          <!-- 详情 -->

          <view class="ts-flex ts-row">
            <view class="ts-flex ts-row">
              <view class="ts-flex ts-row ts-margin-right">
                <image src="../../static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
              </view>
              <view class="ts-flex ts-column">
                <view class="ts-flex ts-row ts-h5 ts-text-bold">校青山湖读书协会</view>
                <view class="ts-flex ts-row ts-h5">校级，社团与协会，学术科技类</view>
              </view>
            </view>
            <view class="ts-flex ts-row ts-flex-item" style="justify-content: flex-end;">
              <ts-badge type="primary" text="73"></ts-badge>
            </view>
          </view>


        </view>
        <view v-show="currentTab === 1" class="ts-flex ts-column ts-flex-item">
          <!-- 信息 -->

          <view class="ts-flex ts-h4 ts-text-bold">时间范围</view>
          <view class="ts-flex ts-row ts-h5" style="justify-content: space-between;">
            <view class="ts-flex">报名时间</view>
            <view class="ts-flex">2018.10.16 08:00-2018.10.30 24:00</view>
          </view>
          <view class="ts-flex ts-row ts-h5" style="justify-content: space-between;">
            <view class="ts-flex">活动时间</view>
            <view class="ts-flex">2018.10.16 08:00-2018.10.30 24:00</view>
          </view>
          <view class="ts-gap"></view>

          <view class="ts-flex ts-h4 ts-text-bold">活动级别</view>
          <view class="ts-flex ts-h5" style="justify-content: space-between;">
            <view class="ts-flex">本次活动级别</view>
            <view class="ts-flex">
              <ts-badge type="danger" text="校级"></ts-badge>
            </view>
          </view>
          <view class="ts-gap"></view>


          <view class="ts-flex ts-h4 ts-text-bold">报名人数</view>
          <view class="ts-flex ts-h5" style="justify-content: space-between;">
            <view class="ts-flex">当前活动报名人数限制</view>
            <view class="ts-flex">
              <ts-badge type="danger" :inverted="true" text="200"></ts-badge>
            </view>
          </view>
          <view class="ts-gap"></view>

          <view class="ts-flex ts-h4 ts-text-bold">学分设置</view>
          <view class="ts-flex ts-h5" style="justify-content: space-between;">
            <view class="ts-flex">学时</view>
            <view class="ts-flex">学分2，名额2000</view>
          </view>
          <view class="ts-gap"></view>

          <view class="ts-flex ts-h4 ts-text-bold">活动标签</view>
          <view class="ts-flex ts-h5" style="justify-content: space-between;">
            <view class="ts-flex ts-row">当前活动标签</view>
            <view class="ts-flex ts-row">
              <ts-badge type="warning" text="主题讲座"></ts-badge>
              <ts-badge type="warning" text="参观学习" padding-left="20"></ts-badge>
            </view>
          </view>
          <view class="ts-gap"></view>

        </view>

        <view v-show="currentTab === 2" class="ts-flex ts-column ts-flex-item">
          <!-- 人员 -->
          <view class="ts-flex">
            <view class="ts-flex">
              <view class="ts-flex ts-margin-right">
                <image src="../../static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
              </view>
              <view class="ts-flex ts-column">
                <view class="ts-flex ts-h5 ts-text-bold">李万里</view>
                <view class="ts-flex ts-h5">广州番禺职业技术学院信息工程学院</view>
              </view>
            </view>
            <view class="ts-flex ts-flex-item" style="justify-content: flex-end;">
              <view class="ts-flex">
                <ts-badge type="primary" text="负责人"></ts-badge>
              </view>
            </view>
          </view>
          <view class="ts-gap"></view>


          <view class="ts-flex ts-row">
            <view class="ts-flex ts-row">
              <view class="ts-flex ts-row ts-margin-right">
                <image src="../../static/photo.jpg" style="width: 80upx; height: 80upx;"></image>
              </view>
              <view class="ts-flex ts-column">
                <view class="ts-flex ts-row ts-h5 ts-text-bold">张菲菲</view>
                <view class="ts-flex ts-row ts-h5">广州番禺职业技术学院信息工程学院</view>
              </view>
            </view>
            <view class="ts-flex ts-row ts-flex-item" style="justify-content: flex-end;">
              <ts-badge type="warning" text="组织者"></ts-badge>
            </view>
          </view>
          <view class="ts-gap"></view>


        </view>

        <view v-if="currentTab === 3" class="ts-flex ts-column ts-flex-item">
          <!-- 位置 -->
          <view class="ts-flex ts-row">
            <map id="mapid" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale" :markers="markers">
            </map>
          </view>
        </view>
      </view>

    </view>


    <view style="width: 100%; height: 100upx;">
    </view>

    <view class="ts-flex ts-row" style="position: fixed; bottom: 0;left: 0; right: 0; width: 100%; height: 100upx; border-top: #CCCCCC solid 1upx; z-index: 1; background: #FFF;">
      <view class="ts-flex ts-row ts-flex-item" style="justify-content: center; align-items: center;">
        <text class="ts-flex ts-row ts-h5">不在活动规定院系</text>
      </view>
      <view class="ts-flex ts-row ts-flex-item">
        <ts-button type="danger">
          <text class="ts-flex ts-row ts-h4">报名</text>
        </ts-button>
      </view>
    </view>
  </view>
</template>

<script>
  import tsSegmentedControl from 'components/teaset/components/ts-segmented-control/ts-segmented-control.vue';

  var self;
  export default {
    components: {
      tsSegmentedControl,
    },
    //{"type":"gcj02","latitude":22.902757,"longitude":113.311673,"speed":0,"accuracy":30,"errMsg":"getLocation:ok"} 
    data() {
      return {
        currentTab: 0,
        tabs: ['详情', '信息', '人员', '位置'],
        coverUrl: 'http://placehold.it/750x500',
        latitude: 22.902757,
        longitude: 113.311673,
        scale: 18, //地图缩放级别：5-18
        // markers: [],
        markers: [{
          latitude: 22.902757,
          longitude: 113.311673,
          iconPath: '../../static/location.png'
        }]
      }
    },
    onLoad() {
      self = this;
    },
    onShow() {
      //显示当前位置
      uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: function(res) {

          console.log(JSON.stringify(res))
          const latitude = res.latitude;
          const longitude = res.longitude;

          self.latitude = latitude;
          self.longitude = longitude;
          self.markers = [{
            latitude: latitude,
            longitude: longitude,
            iconPath: '../../static/location.png',

            label: {
              content: '我的位置',
              color: '#FF0000'
            }
          }];

          //移动到当前位置
          let mapContext = uni.createMapContext("mapid", self);
          mapContext.moveToLocation({
            latitude: latitude,
            longitude: longitude,
          });

        },
      })
    },
  };
</script>

<style>
  page {
    font-size: 32upx;
    /* line-height: 1.6; */
  }

  view {
    display: flex;
    flex-direction: row;
    border: #000000 solid 1px;
  }

  .ts-gap {
    background-color: #FFFFFF;
  }

  map {
    width: 100%;
    height: 850upx;
  }
</style>
